<template>
  <div class="rightMidBox">
    <h4>12小时车位使用饱和率图标</h4>
    <div id="rightMidCharts" :style="{width: '100%', height: '100%'}"></div>
  </div>
</template>

<script>
import {
  getSpaceSaturation
} from '../api/api';
export default {
  name: 'rightTop',
  data() {
    return {
      msg: 'rightTop',
      dataBotxAxis: [],
      dataSeries: [],
    }
  },
  mounted() {
    this.getSpaceSatura();

    setInterval(() => {
      this.getSpaceSatura();
    }, 3000);

  },
  methods: {
    getSpaceSatura() {
      getSpaceSaturation().then(res => {
        this.dataBotxAxis = []
        this.dataSeries = []

        // 绘制图表        
        res.datas.forEach((item, index) => {
          this.dataBotxAxis.push(item.now);
          this.dataSeries.push(item.saturation);
        });
        let rightMidCharts = this.$echarts.init(document.getElementById('rightMidCharts'))
        var option = {
          color: ['#00ffff', '#ff0000', '#f0e750'],

          tooltip: {
            trigger: 'axis',
            textStyle: {
              fontSize: 15,
              color: "#fff",
            }
          },
          grid: {
            show: true,
            left: 60,
            top: 60,
            right: 44,
            bottom: 60,
            borderWidth: 1,
            borderColor: 'rgba(170,172,178,0.33)',
            backgroundColor: '#0b173f',
          },
          calculable: true,
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            //在（type: 'category'）中设置data有效
            data: this.dataBotxAxis,
            axisLine: { //坐标轴轴线相关设置。就是数学上的x轴
              show: true,
              lineStyle: {
                color: 'rgba(170,172,178,0.53)'
              },
            },
            axisLabel: {
              textStyle: {
                color: 'rgba(255,255,255,0.83)',
                fontSize: 15,
              },
            },
          }],
          yAxis: [{
            type: 'value',
            min: 0,
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(170,172,178,0.33)'
              }
            },
            axisLine: { //坐标轴轴线相关设置。就是数学上的y轴
              show: true,
              lineStyle: {
                color: '#0d1b38'
              },
            },
            axisLabel: {
              textStyle: {
                color: 'rgba(255,255,255,0.8)',
                fontSize: 12,
              },
            },
            splitArea: {
              show: true,
              //设置分割的色块
              areaStyle: {
                color: ['rgba(55,84,200,0.2)', 'rgba(55,84,200,0.4)', 'rgba(55,84,200,0.6)',
                  'rgba(55,84,200,0.8)', 'rgba(55,84,200,1)'
                ]
              }
            }
          }],
          series: [{
            name: '中危',
            type: 'line',
            smooth: true,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            areaStyle: {
              normal: {
                //设置曲线渐变
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(60, 200, 230, 1)'
                }, {
                  offset: 1,
                  color: 'rgba(60, 200, 230, 0.1)'
                }], false),
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(60, 200, 230)',
                "label": {
                  "show": true,
                  "position": "top",
                  formatter: function (p) {
                    return p.value > 0 ? (p.value) : '';
                  }
                }
              }
            },
            data: this.dataSeries,
            markPoint: { //设置最大值和最小值
              data: [{
                type: 'max',
                // y: '90',
                symbolSize: [70, 65],
                symbolOffset: [0, 20],
                itemStyle: {
                  normal: {
                    color: "#55d6e9"
                  }
                },
                label: {
                  normal: {
                    formatter: '{c}',
                    show: true,
                    textStyle: {
                      fontSize: '16',
                      fontWeight: 'bold',
                      color: '#ffff00'
                    }
                  }
                }
              }]
            }
          }]
        }
        rightMidCharts.setOption(option);
      })
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.rightMidBox {
  position: absolute;
  right: 0.44rem;
  top: 3.75rem;
  background: url(../assets/rightcombg.png) no-repeat;
  background-size: 100% auto;
  width: 6.15rem;
  height: 3.1rem;
  color: aqua;
}

.rightMidBox h4 {
  position: absolute;
  left: 0.3rem;
  top: 0.1rem;
  font-size: 0.18rem;
  color: #18b3f0;
  margin: 0;
  padding: 0;
}
</style>
